<template>
    <div style="    display: flex;
    flex-direction: column;
    align-items: center;">
        <div class="top">
            <div class="center" >
                <div style="display: flex;justify-content: start;align-items: center;width: 350px;">
                    <el-botton  @click="addDialog">
                        <svg style="margin-right: 5px;" width="44" height="39" viewBox="0 0 44 39" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <rect width="43.4754" height="39" rx="19.5" fill="#EDEDED" />
                            <g clip-path="url(#clip0_585_19804)">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M22.1925 10.6726C22.6505 10.6693 23.0188 10.9996 23.015 11.4105L22.9452 19.0831L31.4983 19.0205C31.9563 19.0172 32.3246 19.3475 32.3209 19.7584C32.3171 20.1692 31.9428 20.505 31.4848 20.5084L22.9317 20.571L22.8619 28.2436C22.8581 28.6545 22.4838 28.9903 22.0258 28.9936C21.5678 28.997 21.1995 28.6667 21.2033 28.2558L21.2731 20.5831L12.72 20.6458C12.262 20.6491 11.8937 20.3188 11.8974 19.9079C11.9012 19.4971 12.2755 19.1613 12.7335 19.1579L21.2866 19.0953L21.3564 11.4226C21.3602 11.0118 21.7345 10.676 22.1925 10.6726Z"
                                    fill="#0F172A" />
                            </g>
                            <defs>
                                <clipPath id="clip0_585_19804">
                                    <rect width="25.0028" height="25.4144" fill="white"
                                        transform="matrix(0.744382 0.667754 -0.744382 0.667754 22.2622 3)" />
                                </clipPath>
                            </defs>
                        </svg>
                    </el-botton>
                    <div v-if="queryParam.check">
                        <el-tag  style="margin-right: 5px;align-items: center;" v-for="(tag,index) in queryParam.check" :key="index" v-show="index < 2"
                            :closable="true" :disable-transitions="false" @close="handleClose(index)" type="info" effect="dark"
                            round>
                            {{ tag }}
                        </el-tag>
                        <el-tag  :closable="false" :disable-transitions="false" v-if="queryParam.check.length>2" style="margin-right: 5px;align-items: center;"  type="info" effect="dark">+{{ queryParam.check.length - 2 }}</el-tag>
                    </div>
                </div>
                <div style="width: 500px;display: flex;justify-content: center;">
                    <h3>Get inspired and copy their plans</h3>
                </div>
                <div style="width: 350px;display: flex;justify-content: end;">
                <button class="skip"  @click="goplan">
                    <div @click="goplan">Skip</div>
                    <svg t="1725379526739" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4250" width="25" height="25"><path d="M761.055557 532.128047c0.512619-0.992555 1.343475-1.823411 1.792447-2.848649 8.800538-18.304636 5.919204-40.703346-9.664077-55.424808L399.935923 139.743798c-19.264507-18.208305-49.631179-17.344765-67.872168 1.888778-18.208305 19.264507-17.375729 49.631179 1.888778 67.872168l316.960409 299.839269L335.199677 813.631716c-19.071845 18.399247-19.648112 48.767639-1.247144 67.872168 9.407768 9.791372 21.984142 14.688778 34.560516 14.688778 12.000108 0 24.000215-4.479398 33.311652-13.439914l350.048434-337.375729c0.672598-0.672598 0.927187-1.599785 1.599785-2.303346 0.512619-0.479935 1.056202-0.832576 1.567101-1.343475C757.759656 538.879828 759.199462 535.391265 761.055557 532.128047z" fill="#ffffff" p-id="4251"></path></svg>

                </button>
            </div>
            </div>
        </div>
        <popular-Guid :queryParam="queryParam"></popular-Guid>

        <el-dialog title="How do you want to spend your time?" style="height: 248px;border-radius: 20px;" v-model="centerDialogVisible"  width="650" center :show-close="false">
       
            <div class="demo-button-style">
                <el-checkbox-group  v-model="check" size="small" border="true">
                  <el-checkbox-button
                    v-for="item in spends"
                    :key="item"
                    :value="item"
                  >
                    {{ item }}
                  </el-checkbox-button>
                </el-checkbox-group>
              </div>
      
              <template #footer>
                <div class="dialog-footer">
                    <el-button round type="primary" @click="ok" >
                        OK
                      </el-button>
                
                </div>
              </template>
          </el-dialog>
    </div>
</template>
<script setup>
    import Cookies from 'js-cookie';
    import { ref } from 'vue';
    import enLocal from "element-plus/es/locale/lang/en";
    import popularGuid from '@/components/ExploreList/popularGuidNew.vue';
    import { useRouter , useRoute } from 'vue-router';
    import { categories as getcategories } from '@/api/index';
    import cache from "@/plugins/cache";
const routers =useRouter();
const route =useRoute();
const spends = ref([]);  
const queryParam = ref({});

const check = ref([])
const centerDialogVisible = ref(false)
// if(route.query){

    queryParam.value = JSON.parse(Cookies.get("setPlanQurry")) ;
    console.log(queryParam.value)
   
    // queryParam.value.check =  Array.isArray(queryParam.value.check) ? queryParam.value.check : [queryParam.value.check];
// }
getcategories({page:0,size:50}).then(res=>{
    spends.value = []
    res.forEach(element => {
        spends.value.push(element.name)  
    });
     
})

    const handleClose = (index) => {
       console.log(index)

        if (index > -1) {
            queryParam.value.check.splice(index, 1);
          
        }
        console.log(queryParam.value.check);
    };
    function goplan() {
        cache.session.remove('events')
        sessionStorage.removeItem('plans')
        routers.push({ path: '/stepOne', query: queryParam.value });
    }
    function addDialog() {
        check.value = queryParam.value.check
        centerDialogVisible.value = true

    }
    function ok() {
        queryParam.value.check = check.value
        Cookies.set('setPlanQurry', JSON.stringify(queryParam.value), { expires: 7 }); // 7 天过期
        centerDialogVisible.value = false
    }
</script>
<style scoped>
    .skip{
        width: 100px;
    font-size: 21px;
    height: 50px;
    display: flex;
    align-items: center;
    border-radius: 100px;
    background-color: #909399;
    color: rgb(255, 255, 255);
    justify-content: center;
    border: none;
    }
    .center {
        width: 100%;
    min-width: 500px;
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    }

    .demo-button-style {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .center-btn {
        display: flex;
        justify-content: center;
    }

    .el-button {
        padding: 5px 10px;
        background-color: #FF8820;
        color: #fff;
        border: none;
        margin-top: 15%;
        cursor: pointer;
        width: 150px;
        margin-bottom: 300px;
    }

    .item-col {
        display: flex;
        justify-content: space-evenly;
        width: 250px;
    }

    .top {
       width: 1240px;
        max-width: 1240px;
        min-width: 720px;
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    .main-center {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    .center h3 {
        color: black;
    }

    .label {
        font-weight: bold;
        color: #000;
    }

    .row .row-bg {
        width: 100%;

    }

    .item {
        display: flex;
    }

    .svg {
        width: 25px;
        margin-right: 15px;
        color: #000;
    }
</style>
<style lang="css">
    .el-input__wrapper {
        box-shadow: 0 0 0 1px #ffffff inset;
    }

    .el-date-editor .el-range__icon {
        color: #000000;
        float: left;
        font-size: 17px;
        height: inherit;
    }

    .el-date-editor.el-input__wrapper {
        box-shadow: 0 0 0 1px #ffffff inset;
    }

    .el-select__wrapper.el-tooltip__trigger.el-tooltip__trigger {
        box-shadow: 0 0 0 1px #ffffff inset;
    }

    .el-icon.el-select__caret.el-select__icon {
        color: #000;
    }

    .el-checkbox-group {

        width: 500px;

    }

    .el-checkbox-button--small .el-checkbox-button__inner {

        font-size: 12px;
        padding: 5px 11px;
        margin-right: 17px;
    }

    .el-checkbox-button:first-child .el-checkbox-button__inner {

        border-radius: 50px;
    }

    .el-checkbox-button .el-checkbox-button__inner {

        border-radius: 50px;
    }

    .el-checkbox-button:last-child .el-checkbox-button__inner {
        border-radius: 50px;
    }

    .el-checkbox-button.is-checked .el-checkbox-button__inner {
        background-color: #ffffff;
        border-color: #000000;
        box-shadow: -1px 0 0 0 #ffffff;
        color: #000000;
    }
</style>